<template>
	<header-page-layout ref="header" title="接口域名设置" base-background-color="#f8f8ff" background-color="#ffffff" @headerclick="onHeaderClick">
		<template v-slot:headerleft><u-icon name="arrow-left"></u-icon></template>
		<view class="setting-host-page page-padding">
			<u--form ref="form" :model="form" :rules="rules" :labelWidth="0">
				<u-form-item prop="host">
					<u--input v-model.trim="form.host" clearable placeholder="请输入域名"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<template v-slot:footer>
			<view class="page-padding page-footer-padding">
				<u-button type="primary" text="保 存" @click="onSave"></u-button>
			</view>
		</template>
	</header-page-layout>
</template>

<script>
import HeaderPageLayout from '@/components/HeaderPageLayout.vue'
export default {
	name:'hostSettingPage',
	components:{HeaderPageLayout},
	data(){
		return {
			form:{
				host:''
			},
			rules:{
				host:{
					trigger:['blur'],
					required: true,
					message:'请输入域名！'
				}
			}
		}
	},
	methods:{
		onHeaderClick(type){
			if (type==='left') {
				this.goBack()
			}
		},
		goBack(){
			uni.redirectTo({url:this.$config.path.login})
		},
		onSave(){
			this.$refs.form.validate().then(res=>{
				let newHost = this.form.host;
				if (newHost.substr(newHost.length-1)==='/'){
					newHost = newHost.substr(0,newHost.length-1)
				}
				this.$store.commit('system/setdefaultHost',newHost)
				
				uni.showToast({
					icon:'success',
					title: '保存成功'
				});
				
				this.goBack()
			}).catch(errors=>{
				
			})
		}
	},
	onReady() {
		let shost = this.$store.getters['system/getdefaultHost'];
		if (!shost) {
			shost = this.$config.ajax.host.default;
		}
		this.form.host = shost
	}
}
</script>

<style lang="scss" scoped>
.header-icon-btn{
	font-size: 1.3rem;
}
.page-padding{
	padding: 0 30rpx;
}
.page-footer-padding{
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}
.setting-host-page{
	padding-top: 30rpx;
}
</style>